<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('搜索')}}</header-view>
		<scroll-view scroll-y @scrolltolower="scrollBottom" class="content">
			<view class="search">
				<u-search :placeholder="$t('请输入要搜索的股票代码')" v-model="keyword" animation :actionText="$t('搜索')"
					:actionStyle="{color:'#b6b7e4'}" placeholder-color="#8a8bb7" color="#b6b7e4" @custom="getList"
					@search="getList"></u-search>
			</view>
			<view class="data_list flex_between" v-if="list.length!=0">
				<view class="data_item" v-for="(item,index) in list" :class="item.gain>0?'up':'down'"
					@tap="openDetail(item)">
					<view class="title flex_between">
						<view class="name el1">{{item.name}}</view>
						<view class="tag">{{item.code}}</view>
					</view>
					<view class="data" :class="item.gain>0?'green':'red'">
						<view class="price">{{item.price}}</view>
						<view class="detail flex_center">
							<view class="inner"></view>
							<text>{{item.gainvalue}}</text><text>{{item.gain}}%</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		stockListApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				// activeNav: 1,
				keyword: "",
				page: 1,
				list: []
			};
		},
		methods: {
			getList() {
				stockListApi({
					page: this.page,
					keyword: this.keyword,
					type: 0
				}).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.list = res.data.data.data
					} else {
						this.list = [...this.list, ...res.data.data.data]
					}
				})
			},
			scrollBottom() {
				if (this.total == this.list.length) {
					return
				}
				this.page++
				this.getList()
			},
			openDetail(opt) {
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + opt.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding-bottom: 40rpx;

		.content {
			flex: 1;
			overflow: auto;

			.search {
				margin: 0 24rpx;

				/deep/.u-search__content,
				/deep/.u-search__content__input {
					background: #212240 !important;
				}
			}

			.data_list {
				flex-wrap: wrap;
				margin-top: 20rpx;

				.data_item {
					width: calc(50% - 7px);
					background: #12132d;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					overflow: hidden;

					.title {
						width: 100%;
						overflow: hidden;
						color: #dbdbde;
						height: 54rpx;
						background: #282945;
						padding: 0 12rpx;
						line-height: 54rpx;

						.name {
							width: 60%;
							font-size: 30rpx;
						}

						.tag {
							font-size: 24rpx;
						}
					}

					.data {
						text-align: center;
						padding: 20rpx 0;

						.price {
							font-size: 46rpx;
							font-weight: 700;
						}

						.detail {
							font-size: 24rpx;
							font-weight: 400;

							.inner {
								width: 18rpx;
								height: 18rpx;
							}

							uni-text {
								margin-left: 12rpx;
							}
						}
					}
				}
			}

			.no_data {
				margin-top: 70rpx;

				.btn {
					margin: 0 auto;
					font-size: 36rpx;
					font-weight: 400;
					color: #9984dc;
					width: 460rpx;
					height: 88rpx;
					border: 2rpx solid #9984dc;
					border-radius: 44rpx;
				}
			}

			.up {
				background: linear-gradient(0deg, #0a0b24, #073b22);

				.inner {
					background: #53b15f;
					clip-path: polygon(0 100%, 50% 0, 100% 100%);
				}
			}

			.down {
				background: linear-gradient(0deg, #0a0b24, #580d0d);

				.inner {
					background: #f53e3e;
					clip-path: polygon(0 0, 50% 100%, 100% 0);
				}

			}
		}
	}
</style>